import dash
from dash import Dash, html, dcc
from dash.dependencies import Input, Output
from src.common.utils.wraper_fig import wraper_fig
from src.core.group_portraits.group_portraits import analyze

def create_layout():
    return html.Div(
        children=[
            html.Header([
                html.H1('👥 群体用户画像', 
                       style={'color': '#2c3e50', 'marginBottom': '20px', 'textAlign': 'center'}),
                html.Div(id='hidden-div', style={'display': 'none'})
            ],
                style={
                    'backgroundColor': '#f8f9fa',
                    'padding': '2rem',
                    'boxShadow': '0 2px 4px rgba(0,0,0,0.1)'
                }
            ),

            html.Main([
                html.Section([
                    html.H2('📊 核心指标总览', style={'color': '#34495e', 'marginBottom': '15px'}),
                    dcc.Loading(
                        id="loading-data",
                        type="circle",
                        children=html.Div(
                            id='data-table',
                            style={
                                'backgroundColor': 'white',
                                'padding': '20px',
                                'borderRadius': '8px',
                                'boxShadow': '0 2px 4px rgba(0,0,0,0.05)'
                            }
                        )
                    )
                ],
                    style={
                        'maxWidth': '1200px',
                        'margin': '20px auto',
                        'padding': '0 20px'
                    }
                ),

                html.Section([
                    html.H2('📈 数据分析图表', style={'color': '#34495e', 'marginBottom': '15px'}),
                    html.Div([
                        html.Div([
                            dcc.Loading(
                                id='fig1-loading',
                                type='circle',
                                children=html.Img(
                                    id='fig1-img',
                                    style={
                                        'width': '100%',
                                        'height': '1200px',
                                        'objectFit': 'contain'
                                    }
                                )
                            )
                        ],
                            style={
                                'backgroundColor': 'white',
                                'padding': '20px',
                                'borderRadius': '8px',
                                'boxShadow': '0 2px 4px rgba(0,0,0,0.05)',
                                'marginBottom': '20px'
                            }
                        ),
                        html.Div([
                            dcc.Loading(
                                id='fig2-loading',
                                type='circle',
                                children=html.Img(
                                    id='fig2-img',
                                    style={
                                        'width': '100%',
                                        'height': '800px',
                                        'objectFit': 'contain'
                                    }
                                )
                            )
                        ],
                            style={
                                'backgroundColor': 'white',
                                'padding': '20px',
                                'borderRadius': '8px',
                                'boxShadow': '0 2px 4px rgba(0,0,0,0.05)',
                                'marginBottom': '20px'
                            }
                        )
                    ])
                ],
                    style={
                        'maxWidth': '1200px',
                        'margin': '20px auto',
                        'padding': '0 20px'
                    }
                )
            ],
                style={
                    'padding': '20px 0',
                    'backgroundColor': '#ecf0f1'
                }
            )
        ],
        style={
            'fontFamily': 'Segoe UI, system-ui',
            'minHeight': '100vh',
            'backgroundColor': '#ecf0f1'
        }
    )

def register_callbacks(app):
    @app.callback(
        [Output('data-table', 'children'),
         Output('fig1-img', 'src'),
         Output('fig2-img', 'src'),
         ],
        [Input('hidden-div', 'children')]
    )
    def update_dashboard(_):
        df, fig1, fig2 = analyze()
        
        table = html.Div([
            dash.dash_table.DataTable(
                data=df.to_dict('records'),
                columns=[{'name': i, 'id': i} for i in df.columns],
                style_table={'overflowX': 'auto'},
                style_header={
                    'backgroundColor': '#3498db',
                    'color': 'white',
                    'fontWeight': '600'
                },
                style_cell={
                    'textAlign': 'left',
                    'padding': '12px',
                    'border': '1px solid #f0f0f0'
                },
                style_data_conditional=[
                    {'if': {'row_index': 'odd'}, 
                     'backgroundColor': '#f8f9fa'}
                ]
            )
        ])
        
        return [
            table,
            wraper_fig(fig1),
            wraper_fig(fig2)
        ]

def init_group_portraits_board(server):
    app = Dash(
        __name__,
        server=server,
        url_base_pathname='/group_portraits/'
    )

    app.layout = create_layout()

    register_callbacks(app)

    return app
